<template>
	<div>
		<div class="header">
			<div class="activityname">蓝色港湾跑步活动</div>
			<image class="activitypicture" src="../../static/HomePage/activityTb1.JPG" mode=""></image>
			<div class="timeadddress">
				<div class="left">
					<div class="activitydate"><u-icon name="clock"></u-icon>
						<div class="text">2023-09-12-18：00</div>
					</div>
					<div class="activityaddress"><u-icon name="map"></u-icon>
						<div class="text">朝阳区蓝色港湾BlueGlass..</div>
					</div>
				</div>
				<div class="right">
					<div class="share"><u-icon name="share" size="50"></u-icon>
						<div class="text">分享</div>
					</div>
				</div>
			</div>
		</div>
		<div class="center">
			<div class="descriptionbg">
				<div class="description">
					<H1>活动描述</H1>
					<div class="text">
						<view class="u-content">
							<u-parse :html="content"></u-parse>
						</view>
					</div>
				</div>
			</div>
			<div class="activitypicturelist">
				<div class="activitypicture">
					<image class="picture" src="../../static/HomePage/activitydh1.JPG" mode=""></image>
				</div>
			</div>

		</div>

		<div class="buttonbar">
			<div class="ancel">取消报名</div>
			<div class="qrCard">查看二维码</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				content: `中国美术馆地铁站B口<br>
				后附跑团主理人二维码联系加入跑团<br>
				距离：6km和11km<br>
				配速 6km队：前3km 6'30-后3km 6'15<br>
				配速11km队：前6km 6'00-后5km 5'30-5'00<br>
				热身开场：19:20-19:30<br>
				欢乐开跑：19:30-20:30<br>
				拉伸放松：20:30-20:40<br>
				第一圈午门、东华门和角楼停表合影<br>
				第二圈不停表<br>
				专业PACER领跑及拉伸。<br>
				提示：运动有风险，请大家自行购买运动保险，跑步量
				力而行，千衣服更换<br>
				跑起来，遇见更好的自己~<br>
				“原”自热爱<br>
				“始”于初心<br>
				“人”礼存心<br>
				`,
			}
		},
	}
</script>

<style lang="scss">
	.header {

		width: 90%;
		margin: 0 auto;

		.activityname {
			margin: 10px 0px 0px 10px;
			width: 100%;
			height: 25px;
			font-size: 24px;
			font-weight: 400;
			letter-spacing: 1.89px;
			line-height: 24px;
			color: rgba(0, 0, 0, 1);
			text-align: left;
			vertical-align: top;
			overflow: hidden;
			white-space: nowrap; //内容超出不换行
			text-overflow: ellipsis;
		}

		.activitypicture {
			margin-top: 10px;
			width: 100%;
			height: 156px;
			opacity: 1;
			border-radius: 20px;
		}

		.timeadddress {
			display: flex;
			padding-top: 20px;

			.left {
				flex: 2;

				.activitydate {
					display: flex;

					.text {
						margin-left: 8px;
						overflow: hidden;
						white-space: nowrap; //内容超出不换行
						text-overflow: ellipsis;
					}
				}

				.activityaddress {
					padding-top: 5px;
					display: flex;

					.text {
						margin-left: 8px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						border-bottom: 1px solid #000;
					}
				}
			}

			.right {
				.share {
					display: flex;
					justify-content: center;
					align-items: center;

					.text {
						font-size: 24px;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 21.95px;
						color: rgba(0, 0, 0, 1);
						text-align: left;
					}
				}
			}
		}


	}

	.center {
		width: 90%;
		margin: 0 auto;

		.descriptionbg {
			margin-top: 20px;
			width: 100%;
			opacity: 1;
			border-radius: 20px;
			background: rgba(229, 229, 229, 1);

			.description {
				padding: 10px 10px 10px 20px;
			}
		}

		.activitypicturelist {

			width: 100%;

			.activitypicture {
				margin-top: 10px;

				width: 100%;
				height: 475px;

				.picture {

					width: 100%;
					height: 100%;
					border-radius: 20px;
				}
			}
		}
	}

	.buttonbar {
		display: flex;
		position: fixed;
		line-height: var(--footer-height);
		top: 88%;
		left: 5%;
		width: 90%;

		.ancel {
			width: 40%;
			height: 66px;
			opacity: 1;
			border-radius: 50px;
			background: rgba(0, 0, 0, 1);
			font-size: 24px;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 66px;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
		.qrCard {
			width: 60%;
			height: 66px;
			margin-left: 10px;
			opacity: 1;
			border-radius: 50px;
			background: rgba(0, 0, 0, 1);
			font-size: 24px;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 66px;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
</style>